<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://eureka.yigolden.net/stringutils/sutaglib/1.0" prefix="su"%>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>宿舍展示</title>
    <!-- Bootstrap core CSS -->
    <link href="<%=request.getContextPath() %>/static/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="<%=request.getContextPath() %>/static/css/signin.css" rel="stylesheet">
    <link href="<%=request.getContextPath() %>/static/css/summernote.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="<%=request.getContextPath() %>/static/js/html5shiv.min.js"></script>
      <script src="<%=request.getContextPath() %>/static/js/respond.min.js"></script>
    <![endif]-->

  </head>

  <body>
<jsp:include page="../Common/navHeader.jsp"></jsp:include>
  <div class="container">
	<h1 style="font-family:华文行楷;" >好室友<small>网</small> </h1>
    <div class="row">
		<div class="col-xs-1 col-sm-2">
		</div>
		<div class="col-xs-10 col-sm-8"> 
  		<div class="row">
  			<div class="col-sm-3" style="padding: 0px;">
  				<div class="form-group">
		  			<c:if test="${universities ne null }">
		  			<select class="form-control" id="university" name="university">
		  				<option value="0">请选择机构</option>
		  				<c:forEach var="item" items="${ universities}">
		  				<option value="${item.id }">${item.name}</option>
		  				</c:forEach>
					</select>
					</c:if>
					<c:if test="${universities eq null }">
		  			<select class="form-control" id="university" name="university">
		  				<option value="0">机构加载失败</option>
					</select>
					</c:if>
  				</div>
  			</div>
  			<div class="col-sm-9" style="padding: 0px;">
  				<div class="form-group">
  					<input type="text" class="form-control" id="subject" name="subject" placeholder="主题……">
  				</div>
  			</div>
		</div>  
  		
  		<div class="row">
  			<div class="form-group">
  				<div class="summernote" id="summernote"></div>
  			</div>
  		</div>
		<div class="row">
			<div class="form-group">
				<label for="uploadFile" style="display:inline;">上传图片： </label>
				<input type="file" name="uploadFile" id="uploadFile" style="display:inline;"/>
				<label class="help-block" style="display:inline;">请上传像素为600*400的图片，否则将上传失败</label>
			</div>			
		</div>
		<div class="row">
			<div style="width:100% ;max-height:auto;overflow:hidden;">
				<img style="width:100%;height:auto;" id="uploadImage" alt="上传图片显示区域" src="">
			</div>
		</div>
		<div class="row">
	  		<div class="form-group">
	  			<div class="col-xs-12 text-center" style="margin-top:20px">
	      			<div class="col-xs-6 text-right" style="display:inline">
	     				 <button id="btn-submit" class="btn btn-success">确认添加</button>
	     		    </div>
	      			<div class="col-xs-6 text-left" style="display:inline">
	      				<button type="reset" class="btn btn-warning">重新填写</button>
	      			</div>
	  			</div>
	  		</div>
  		</div>
		<div class="row">
			<div class="form-group">
    		<c:if test="${errorCode eq 1 }">
          		<div class="alert alert-warning" role="alert" id="alert-warning">发表失败！</div>
        	</c:if>
        	<c:if test="${successCode eq 1 }">
          		<div class="alert alert-warning" role="alert" id="alert-warning">发表成功！</div>
        	</c:if>
			</div>
		</div>
        <input type="hidden" name="referrer" value="${su:encodeUriComponent(referer) }" />
      </div>
      <div class="col-xs-1 col-sm-2"></div>
     </div>
    </div> <!-- /container -->
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="<%=request.getContextPath() %>/static/js/ie10-viewport-bug-workaround.js"></script>
    <script src="<%=request.getContextPath() %>/static/js/jquery.min.js" ></script>
    <script src="<%=request.getContextPath() %>/static/js/bootstrap.min.js"></script> 
	<script src="<%=request.getContextPath() %>/static/js/summernote.min.js" ></script>
	<script src="<%=request.getContextPath() %>/static/js/summernote-zh-CN.js" ></script>
	<script>
		function validateForm(){
			var subject = document.getElementById("subject");	
			var description=document.getElementById("description");
			var university = document.getElementById("university");
		
			if(university.value==0){
				alert("机构不能为默认项！");
				university.focus();
				return false;
			}
		
			if(subject.value==""){
				alert("主题不能为空！");
				subject.focus();
				return false;
			}		
			if($('#summernote').summernote('isEmpty')){
				alert("内容不能为空！");
				content.focus();
				return false;
			}
			if($('#summernote').summernote('code').length>10000){
				alert("内容超过10000，请适当精简！");
				content.focus();
				return false;
			}
			return true;
		}
	
		
		 $("#uploadFile").change(function(){
             var objUrl = getObjectURL(this.files[0]) ;
             console.log("objUrl = "+objUrl) ;
             if (objUrl) {
                 $("#uploadImage").attr("src", objUrl) ;
             }
         }) ;
         //建立一個可存取到該file的url
         function getObjectURL(file) {
             var url = null ; 
             if (window.createObjectURL!=undefined) { // basic
                 url = window.createObjectURL(file) ;
             } else if (window.URL!=undefined) { // mozilla(firefox)
                 url = window.URL.createObjectURL(file) ;
             } else if (window.webkitURL!=undefined) { // webkit or chrome
                 url = window.webkitURL.createObjectURL(file) ;
             }
             return url ;
         }

	
		window.adduniversityshowBusy=false;
		$(document).ready(function() {
		    $('#summernote').summernote({
		        height: 200,
		        minHeight: 200,
		        lang: 'zh-CN',
		        placeholder: '请介绍你们的宿舍吧！',
		        toolbar: [
		                  ['style', ['bold', 'italic', 'underline', 'clear']],
		                  ['font', ['strikethrough', 'superscript', 'subscript']],
		                  ['color', ['color']],
		                  ['para', ['ul', 'ol', 'paragraph']]
		                ]
		    });
		    
		    $("#btn-submit").click(function() {
		    	if (!validateForm())
		    		return false;
		    	
		    	if(window.adduniversityshowBusy)
		    		window.adduniversityshowBusy=false;
		    	window.adduniversityshowBusy=true;
	    		
	    		$(this).addClass("disabled");
	    		var postData = new FormData();
	    		postData.append("universityid", $("#university").val());
	    		postData.append("subject", $("#subject").val());
	    		postData.append("description", $('#summernote').summernote('code'));
	    		postData.append("picture", $('#uploadFile').get(0).files[0]);
	    		
	    		$.ajax({
	    			method:"POST",
	    			url:"<%=request.getContextPath()%>/Show/AddUniversityShowByDomitory",
	    			data: postData,
	    			processData: false,
	    			contentType: false,
	    			dataType:"json",
	    			success:function(data){
	    				if(data.status==0){
	    					alert("添加成功！");
	    					window.location.reload();
	    				}else{
	    					alert(data.message);
	    				}
	    			},
	    			error:function(){
	    				alert("服务器连接失败！");
	    			},
	    			complete:function(){
	    				$("#btn-submit").removeClass("disabled");
	    				window.updateMessageBusy=false;
	    			}
	    		});
		    	return false;
		    });
		});
		
		
	</script>
  </body>
</html>